<template>
  <div class="mingxing-container" :class="{ 'dark-mode': isDarkMode }">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="search-box">
        <input type="text" v-model="searchQuery" @input="handleSearchInput" placeholder="搜索明星..." />
        <button @click="searchStar">搜索</button>
      </div>
      <div class="user-info">
        <span>{{ username }}</span>
        <div class="theme-toggle" @click="toggleTheme">
          <i :class="isDarkMode ? 'icon-moon' : 'icon-sun'"></i>
        </div>
      </div>
    </div>

    <!-- 加载遮罩 -->
    <div class="loading-mask" v-if="isLoading">
      <div class="loading-spinner"></div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 明星列表区 -->
      <div class="star-list-section">
        <h2>明星列表</h2>
        <div class="category-filter">
          <span 
            v-for="(cat, index) in categories" 
            :key="index" 
            @click="filterByCategory(cat)"
            :class="{ active: currentCategory === cat }">
            {{ cat }}
          </span>
        </div>
        <div class="star-cards">
          <div 
            v-for="(star, index) in filteredStars" 
            :key="index" 
            class="star-card"
            @click="selectStar(star)">
            <div class="star-image">
              <img :src="star.photo" :alt="star.name" @error="handleImageError" />
            </div>
            <div class="star-info">
              <h3>{{ star.name }}</h3>
              <p>{{ star.profession }}</p>
              <p>代表作：{{ star.famousWorks[0] }}</p>
            </div>
          </div>
        </div>
        <button class="refresh-btn" @click="refreshStars">刷新明星数据</button>
      </div>

      <!-- 明星详情区 -->
      <div class="star-detail-section" v-if="selectedStar">
        <h2>{{ selectedStar.name }} 详情</h2>
        <div class="detail-content">
          <div class="detail-image">
            <img :src="selectedStar.photo" :alt="selectedStar.name" @error="handleImageError" />
            <div v-if="imageLoadError.includes(selectedStar.photo)" class="image-error detail-image-error">
              <i class="icon-image-broken"></i>
              <span>图片加载失败</span>
            </div>
          </div>
          <div class="detail-info">
            <h3>基本资料</h3>
            <p><strong>姓名：</strong>{{ selectedStar.name }}</p>
            <p><strong>职业：</strong>{{ selectedStar.profession }}</p>
            <p><strong>生日：</strong>{{ selectedStar.birthday }}</p>
            <p><strong>出生地：</strong>{{ selectedStar.birthplace }}</p>
            
            <h3>演艺经历</h3>
            <p>{{ selectedStar.career }}</p>
            
            <h3>代表作品</h3>
            <ul>
              <li v-for="(work, index) in selectedStar.famousWorks" :key="index">
                {{ work }}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 商业价值评估区 -->
      <div class="value-section" v-if="selectedStar">
        <h2>商业价值评估</h2>
        <div class="value-cards">
          <div class="value-card">
            <h3>影响力指数</h3>
            <div class="star-rating">
              <span v-for="n in Math.floor(selectedStar.commercialValue.influence)" :key="n" class="star filled">★</span>
              <span v-for="n in (5 - Math.floor(selectedStar.commercialValue.influence))" :key="n + 5" class="star">★</span>
            </div>
            <p>{{ selectedStar.commercialValue.influenceDesc }}</p>
          </div>
          <div class="value-card">
            <h3>粉丝基础</h3>
            <div class="star-rating">
              <span v-for="n in Math.floor(selectedStar.commercialValue.fanBase)" :key="n" class="star filled">★</span>
              <span v-for="n in (5 - Math.floor(selectedStar.commercialValue.fanBase))" :key="n + 5" class="star">★</span>
            </div>
            <p>{{ selectedStar.commercialValue.fanBaseDesc }}</p>
          </div>
          <div class="value-card">
            <h3>商业代言</h3>
            <div class="star-rating">
              <span v-for="n in Math.floor(selectedStar.commercialValue.commercial)" :key="n" class="star filled">★</span>
              <span v-for="n in (5 - Math.floor(selectedStar.commercialValue.commercial))" :key="n + 5" class="star">★</span>
            </div>
            <p>{{ selectedStar.commercialValue.commercialDesc }}</p>
          </div>
        </div>
      </div>

      <!-- 互动交友区 -->
      <div class="social-section">
        <h2>互动交友</h2>
        <div class="interaction-area">
          <div class="comment-form" v-if="selectedStar">
            <textarea v-model="newComment" placeholder="发表您对这位明星的看法..."></textarea>
            <button @click="addComment">发表评论</button>
          </div>
          <div class="comments-list">
            <div v-for="(comment, index) in comments" :key="index" class="comment-item">
              <div class="comment-user">{{ comment.username }}</div>
              <div class="comment-content">{{ comment.content }}</div>
              <div class="comment-actions">
                <span @click="likeComment(index)">
                  <i class="icon-like"></i> {{ comment.likes }}
                </span>
                <span @click="replyToComment(index)">
                  <i class="icon-reply"></i> 回复
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作区 -->
    <div class="bottom-nav">
      <div class="nav-item" @click="goToHome">
        <i class="icon-home"></i>
        <span>首页</span>
      </div>
      <div class="nav-item" @click="goToUserCenter">
        <i class="icon-user"></i>
        <span>个人中心</span>
      </div>
    </div>

    <!-- Toast提示 -->
    <div class="toast" v-if="showToast">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'MingxingPage',
  data() {
    return {
      // 用户相关
      username: '游客',
      isDarkMode: false,
      
      // 明星数据
      stars: [],
      selectedStar: null,
      searchQuery: '',
      currentCategory: '全部',
      categories: ['全部', '演员', '歌手', '导演'],
      
      // 互动相关
      comments: [],
      newComment: '',
      
      // UI状态
      isLoading: false,
      showToast: false,
      toastMessage: '',
      imageLoadError: [],
      
      // 示例数据
      exampleStars: [
        {
          name: '张艺谋',
          profession: '导演',
          photo: 'https://via.placeholder.com/150',
          birthday: '1951年11月14日',
          birthplace: '中国陕西省西安市',
          career: '张艺谋是中国著名导演，代表作品包括《红高粱》、《英雄》、《十面埋伏》等。他曾执导2008年北京奥运会开幕式，并多次获得国际电影节大奖。',
          famousWorks: ['红高粱', '英雄', '十面埋伏', '金陵十三钗'],
          commercialValue: {
            influence: 4.8,
            influenceDesc: '国际知名导演，在国内外具有极高的艺术影响力',
            fanBase: 4.5,
            fanBaseDesc: '拥有广泛的粉丝群体，跨越多个年龄层',
            commercial: 4.2,
            commercialDesc: '商业价值高，多次参与大型活动策划和品牌代言'
          }
        },
        {
          name: '周杰伦',
          profession: '歌手',
          photo: 'https://via.placeholder.com/150',
          birthday: '1979年1月18日',
          birthplace: '中国台湾省新北市',
          career: '周杰伦是华语乐坛著名歌手、音乐人，被誉为"亚洲流行天王"。他创作了众多脍炙人口的歌曲，并涉足电影、电视剧等领域。',
          famousWorks: ['七里香', '青花瓷', '稻香', '晴天'],
          commercialValue: {
            influence: 5.0,
            influenceDesc: '亚洲流行音乐领域顶级影响力，引领多项音乐潮流',
            fanBase: 5.0,
            fanBaseDesc: '拥有庞大且忠实的粉丝群体，跨越多个国家和地区',
            commercial: 4.9,
            commercialDesc: '商业代言价值极高，多个国际品牌的首选代言人'
          }
        },
        {
          name: '李冰冰',
          profession: '演员',
          photo: 'https://via.placeholder.com/150',
          birthday: '1973年2月27日',
          birthplace: '中国黑龙江省哈尔滨市',
          career: '李冰冰是中国著名女演员，曾出演《致命ID》、《变形金刚4》等影片，是成功进军好莱坞的中国女演员之一。',
          famousWorks: ['致命ID', '变形金刚4', '功夫之王', '我不是药神'],
          commercialValue: {
            influence: 4.3,
            influenceDesc: '国内外知名度高，在国际电影市场有一定影响力',
            fanBase: 4.0,
            fanBaseDesc: '拥有稳定的粉丝群体，国内外均有支持者',
            commercial: 4.5,
            commercialDesc: '商业代言价值高，是多个国际品牌的亚洲代言人'
          }
        }
      ],
      llmResult:{
    "id": "0196f5f133499cc448b75f992b44b0c6",
    "object": "chat.completion",
    "created": 1747882947,
    "model": "deepseek-ai/DeepSeek-R1-Distill-Qwen-32B",
    "choices": [
        {
            "index": 0,
            "message": {
                "role": "assistant",
                "content": "\n\n```json\n[\n  {\n    \"name\": \"王一博\",\n    \"occupation\": \"演员、歌手\",\n    \"photo_url\": \"https://i0.hdslb.com/bfs/face/9d3b4c0b3d2e787c83550dee96e03e5bf97236d6.jpg\",\n    \"birthday\": \"1997-03-08\",\n    \"birthplace\": \"中国辽宁省大连市\",\n    \"演艺经历\": \"王一博最初以组合NCT的成员身份出道，后转向影视圈发展。他因在电视剧《陈情令》中饰演蓝忘机一角而广受欢迎，随后参演了多部影视作品。\",\n    \"代表作品\": [\"陈情令\", \"重生之密室逃脱\", \"冰雨火\"],\n    \"商业价值评估\": {\n      \"影响力\": \"高\",\n      \"粉丝基础\": \"庞大\",\n      \"商业代言\": \"多个知名品牌，包括电子设备、服装、食品等\"\n    }\n  },\n  {\n    \"name\": \"杨幂\",\n    \"occupation\": \"演员、制片人\",\n    \"photo_url\": \"https://i0.hdslb.com/bfs/face/7196b88a5e45f8f09d158b3f5084d648e676e8a4.jpg\",\n    \"birthday\": \"1986-09-12\",\n    \"birthplace\": \"中国北京市\",\n    \"演艺经历\": \"杨幂是中国著名的女演员和制片人，曾多次获得金鹰奖、白玉兰奖等重要奖项。她在多部热门电视剧中担任女主角。\",\n    \"代表作品\": [\"宫锁心玉\", \"步步惊心\", \"三生三世十里桃花\"],\n    \"商业价值评估\": {\n      \"影响力\": \"极高\",\n      \"粉丝基础\": \"广泛且忠诚\",\n      \"商业代言\": \"涵盖化妆品、珠宝、时尚品牌等多个领域\"\n    }\n  },\n  {\n    \"name\": \"肖战\",\n    \"occupation\": \"演员、歌手\",\n    \"photo_url\": \"https://i0.hdslb.com/bfs/face/1558c40b9d7cf6c9b8c43d8057c2c59355af63f5.jpg\",\n    \"birthday\": \"1999-10-05\",\n    \"birthplace\": \"中国重庆市\",\n    \"演艺经历\": \"肖战因在电视剧《狼殿下》和《陈情令》中的出色表现而迅速走红，随后在影视和音乐领域都有广泛发展。\",\n    \"代表作品\": [\"狼殿下\", \"陈情令\", \"像是雾灾\"],\n    \"商业价值评估\": {\n      \"影响力\": \"高\",\n      \"粉丝基础\": \"庞大且活跃\",\n      \"商业代言\": \"包括电子产品、服装、食品等领域的多个品牌\"\n    }\n  }\n]\n```",
                "reasoning_content": "嗯，用户让我生成三位中国明星的详细资料，包括姓名、职业、照片URL、生日、出生地、演艺经历、代表作品以及商业价值评估，还要返回JSON格式。首先，我需要确定选哪三位明星。考虑到知名度和影响力，可能选一些比较有代表性的，比如顶流明星、实力派演员和新兴偶像。\n\n接下来，每项资料都要详细收集。比如，姓名和职业应该准确无误，照片URL需要确保是可用的链接，生日和出生地也要核实清楚。演艺经历部分要涵盖他们的主要成就和重要作品，这样看起来更专业。\n\n代表作品方面，应该选择他们最著名或影响力最大的几部，这样能突出他们的职业成就。商业价值评估部分需要包含影响力、粉丝基础和商业代言，这部分可能需要参考一些公开的数据或者分析报告，确保评估公正合理。\n\n另外，用户要求返回JSON格式，所以要确保结构正确，键名一致，数据格式无误。还要注意照片URL的有效性，避免链接失效。最后，检查整体数据是否完整，没有遗漏任何信息，确保用户能得到满意的结果。\n"
            },
            "finish_reason": "stop"
        }
    ],
    "usage": {
        "prompt_tokens": 51,
        "completion_tokens": 884,
        "total_tokens": 935,
        "completion_tokens_details": {
            "reasoning_tokens": 233
        }
    },
    "system_fingerprint": ""
}
    };
  },
  computed: {
    filteredStars() {
      if (this.currentCategory === '全部') {
        return this.stars;
      }
      return this.stars.filter(star => star.profession === this.currentCategory);
    }
  },
  methods: {
    // 初始化数据
    initData() {
      // 从localStorage获取数据，如果没有则使用示例数据
      const savedStars = localStorage.getItem('mingxing_stars');
      if (savedStars) {
        this.stars = JSON.parse(savedStars);
      } else {
        this.stars = this.exampleStars;
        localStorage.setItem('mingxing_stars', JSON.stringify(this.stars));
      }
      
      // 获取评论数据
      const savedComments = localStorage.getItem('mingxing_comments');
      if (savedComments) {
        this.comments = JSON.parse(savedComments);
      }
      
      // 获取主题设置
      const theme = localStorage.getItem('mingxing_theme');
      this.isDarkMode = theme === 'dark';
    },
    
    // 主题切换
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode;
      localStorage.setItem('mingxing_theme', this.isDarkMode ? 'dark' : 'light');
    },
    
    // 明星筛选
    filterByCategory(category) {
      this.currentCategory = category;
    },
    
    // 选择明星
    selectStar(star) {
      this.selectedStar = star;
      // 获取该明星的评论
      this.loadComments(star.name);
    },
    
    // 加载评论
    loadComments(starName) {
      // 模拟从localStorage获取特定明星的评论
      const allComments = JSON.parse(localStorage.getItem('mingxing_comments') || '[]');
      this.comments = allComments.filter(comment => comment.starName === starName);
    },
    
    // 添加评论
    addComment() {
      if (!this.newComment.trim()) {
        this.showToastMessage('评论内容不能为空');
        return;
      }
      
      const comment = {
        username: this.username,
        starName: this.selectedStar.name,
        content: this.newComment,
        likes: 0,
        time: new Date().toISOString()
      };
      
      // 添加到当前评论列表
      this.comments.unshift(comment);
      
      // 保存到localStorage
      const allComments = JSON.parse(localStorage.getItem('mingxing_comments') || '[]');
      allComments.unshift(comment);
      localStorage.setItem('mingxing_comments', JSON.stringify(allComments));
      
      // 清空输入框
      this.newComment = '';
      this.showToastMessage('评论发表成功');
    },
    
    // 点赞评论
    likeComment(index) {
      this.comments[index].likes++;
      
      // 更新localStorage
      const allComments = JSON.parse(localStorage.getItem('mingxing_comments') || '[]');
      const commentIndex = allComments.findIndex(c => 
        c.username === this.comments[index].username && 
        c.content === this.comments[index].content &&
        c.starName === this.comments[index].starName
      );
      
      if (commentIndex !== -1) {
        allComments[commentIndex].likes = this.comments[index].likes;
        localStorage.setItem('mingxing_comments', JSON.stringify(allComments));
      }
    },
    
    // 回复评论
    replyToComment(index) {
      this.newComment = `回复 @${this.comments[index].username}：`;
    },
    
    // 处理搜索输入
    handleSearchInput() {
      if (!this.searchQuery.trim()) {
        // 当搜索框清空时，恢复默认列表
        const savedStars = localStorage.getItem('mingxing_stars');
        if (savedStars) {
          this.stars = JSON.parse(savedStars);
        } else {
          this.stars = this.exampleStars;
        }
      }
    },
    
    // 搜索明星
    searchStar() {
      if (!this.searchQuery.trim()) {
        return;
      }
      
      this.isLoading = true;
      
      // 模拟搜索，实际项目中应调用API
      setTimeout(() => {
        const savedStars = localStorage.getItem('mingxing_stars');
        const allStars = savedStars ? JSON.parse(savedStars) : this.exampleStars;
        
        const results = allStars.filter(star => 
          star.name.includes(this.searchQuery) || 
          star.profession.includes(this.searchQuery)
        );
        
        if (results.length > 0) {
          this.stars = results;
        } else {
          this.showToastMessage('未找到相关明星');
        }
        
        this.isLoading = false;
      }, 1000);
    },
    
    // 处理图片加载错误
    handleImageError(event) {
      const imgSrc = event.target.src;
      if (!this.imageLoadError.includes(imgSrc)) {
        this.imageLoadError.push(imgSrc);
      }
    },
    
    // 刷新明星数据（调用AI获取新数据）
    async refreshStars() {
      this.isLoading = true;
      
      try {
        // 调用大模型API获取新的明星数据
        const response = await this.callLLMApi();
        
        if (response && response.choices && response.choices[0].message.content) {
          // 解析返回的明星数据
          const newStars = this.parseStarsData(response.choices[0].message.content);
          
          if (newStars && newStars.length > 0) {
            this.stars = newStars;
            localStorage.setItem('mingxing_stars', JSON.stringify(this.stars));
            this.showToastMessage('明星数据已更新');
          } else {
            throw new Error('解析数据失败');
          }
        } else {
          throw new Error('获取数据失败');
        }
      } catch (error) {
        console.error('刷新明星数据失败:', error);
        this.showToastMessage('获取新数据失败，请稍后重试');
      } finally {
        this.isLoading = false;
      }
    },
    
    // 调用大模型API
    async callLLMApi() {
      try {
        const response = await axios.post('https://api.siliconflow.cn/v1/chat/completions', {
          model: 'deepseek-ai/DeepSeek-R1-Distill-Qwen-32B',
          messages: [{
            role: 'user',
            content: '请生成3位中国明星的详细资料，包括姓名、职业、照片URL、生日、出生地、演艺经历、代表作品以及商业价值评估（影响力、粉丝基础、商业代言）。返回JSON格式数据。'
          }],
          stream: false,
          max_tokens: 1024,
          temperature: 0.7,
          response_format: {
            type: 'text'
          }
        }, {
          headers: {
            Authorization: 'Bearer ' + process.env.VUE_APP_API_KEY,
            'Content-Type': 'application/json'
          }
        });
        
        return response.data;
      } catch (error) {
        console.error('API调用失败:', error);
        throw error;
      }
    },
    
    // 解析明星数据
    parseStarsData(content) {
      try {
        // 尝试直接解析JSON
        return JSON.parse(content);
      } catch (e) {
        // 如果直接解析失败，尝试提取JSON部分
        const jsonMatch = content.match(/```json([\s\S]*?)```/) || 
                         content.match(/\[([\s\S]*?)\]/) ||
                         content.match(/\{([\s\S]*?)\}/);
        
        if (jsonMatch) {
          try {
            const jsonStr = jsonMatch[0].replace(/```json|```/g, '');
            return JSON.parse(jsonStr);
          } catch (e2) {
            console.error('JSON解析失败:', e2);
            return null;
          }
        }
        
        console.error('未找到有效的JSON数据');
        return null;
      }
    },
    
    // 显示Toast消息
    showToastMessage(message) {
      this.toastMessage = message;
      this.showToast = true;
      
      setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },
    
    // 跳转到首页
    goToHome() {
      // 模拟跳转到首页
      this.showToastMessage('正在跳转到首页...');
      // 实际项目中应该使用路由跳转
      setTimeout(() => {
        window.location.href = '/';
      }, 1000);
    },
    
    // 跳转到个人中心
    goToUserCenter() {
      // 模拟跳转
      this.showToastMessage('个人中心功能开发中');
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style scoped>
/* 基础样式 */
.mingxing-container {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  max-width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  color: #333;
  padding-bottom: 60px; /* 为底部导航留出空间 */
  transition: all 0.3s ease;
}

/* 美化标题样式 */
h2 {
  position: relative;
  padding-left: 15px;
  font-size: 22px;
  margin-bottom: 20px;
  color: #c62f2f;
}

h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 20px;
  background-color: #c62f2f;
  border-radius: 3px;
}

/* 暗黑模式 */
.dark-mode {
  background-color: #222;
  color: #eee;
}

.dark-mode .top-nav,
.dark-mode .bottom-nav {
  background-color: #333;
}

.dark-mode .star-card,
.dark-mode .value-card,
.dark-mode .comment-item {
  background-color: #444;
  color: #eee;
}

.dark-mode input,
.dark-mode textarea {
  background-color: #555;
  color: #eee;
  border-color: #666;
}

.dark-mode button {
  background-color: #555;
  color: #eee;
}

/* 顶部导航栏 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-box {
  display: flex;
  flex: 1;
  max-width: 300px;
}

.search-box input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 25px 0 0 25px;
  outline: none;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.search-box input:focus {
  border-color: #c62f2f;
  box-shadow: 0 2px 10px rgba(198, 47, 47, 0.1);
}

.search-box button {
  padding: 12px 20px;
  background-color: #c62f2f;
  color: white;
  border: none;
  border-radius: 0 25px 25px 0;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.search-box button:hover {
  background-color: #a52525;
}

.user-info {
  display: flex;
  align-items: center;
}

.theme-toggle {
  margin-left: 15px;
  cursor: pointer;
  font-size: 20px;
}

/* 主内容区 */
.main-content {
  padding: 15px;
}

/* 明星列表区 */
.star-list-section {
  margin-bottom: 30px;
}

.category-filter {
  display: flex;
  overflow-x: auto;
  margin: 15px 0;
  padding-bottom: 5px;
}

.category-filter span {
  padding: 10px 20px;
  margin-right: 12px;
  background-color: #f5f5f5;
  border-radius: 25px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  font-weight: 500;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.category-filter span:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}

.category-filter span.active {
  background-color: #c62f2f;
  color: white;
  box-shadow: 0 4px 10px rgba(198, 47, 47, 0.2);
}

.star-cards {
  display: flex;
  overflow-x: auto;
  padding-bottom: 15px;
}

.star-card {
  min-width: 150px;
  margin-right: 15px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.star-card:hover {
  transform: translateY(-5px);
}

.star-image {
  height: 150px;
  overflow: hidden;
}

.star-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.star-info {
  padding: 10px;
}

.star-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.star-info p {
  margin: 5px 0;
  font-size: 14px;
  color: #666;
}

.refresh-btn {
  display: block;
  margin: 20px auto;
  padding: 12px 25px;
  background-color: #c62f2f;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(198, 47, 47, 0.2);
}

.refresh-btn:hover {
  background-color: #a52525;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(198, 47, 47, 0.3);
}

/* 明星详情区 */
.star-detail-section {
  margin-bottom: 30px;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.detail-content {
  display: flex;
  flex-direction: column;
}

.detail-image {
  width: 100%;
  max-height: 300px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 15px;
}

.detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info h3 {
  margin: 15px 0 10px;
  color: #c62f2f;
}

.detail-info p {
  margin: 5px 0;
  line-height: 1.5;
}

.detail-info ul {
  padding-left: 20px;
}

/* 商业价值评估区 */
.value-section {
  margin-bottom: 30px;
}

.value-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.value-card {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.star-rating {
  font-size: 24px;
  color: #ddd;
  margin: 10px 0;
}

.star.filled {
  color: #f8ce0b;
}

/* 互动交友区 */
.social-section {
  margin-bottom: 30px;
}

.comment-form {
  margin-bottom: 15px;
}

.comment-form textarea {
  width: 100%;
  height: 80px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 12px;
  resize: none;
  margin-bottom: 15px;
  font-family: inherit;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.comment-form textarea:focus {
  border-color: #c62f2f;
  outline: none;
  box-shadow: 0 2px 10px rgba(198, 47, 47, 0.1);
}

.comment-form button {
  padding: 10px 20px;
  background-color: #c62f2f;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(198, 47, 47, 0.2);
}

.comment-form button:hover {
  background-color: #a52525;
  transform: translateY(-2px);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.comment-item {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  border-left: 3px solid #c62f2f;
}

.comment-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.comment-user {
  font-weight: bold;
  margin-bottom: 5px;
}

.comment-content {
  margin-bottom: 10px;
  line-height: 1.5;
}

.comment-actions {
  display: flex;
  gap: 15px;
  color: #666;
}

.comment-actions span {
  cursor: pointer;
}

.comment-actions span:hover {
  color: #c62f2f;
}

/* 底部导航栏 */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: white;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.nav-item i {
  font-size: 24px;
  margin-bottom: 5px;
}

/* Toast提示 */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 15px 25px;
  border-radius: 4px;
  z-index: 1000;
}

/* 加载遮罩 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #c62f2f;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (min-width: 768px) {
  .detail-content {
    flex-direction: row;
    gap: 20px;
  }
  
  .detail-image {
    width: 300px;
    height: 400px;
    margin-bottom: 0;
  }
  
  .value-cards {
    flex-direction: row;
  }
  
  .value-card {
    flex: 1;
  }
}

/* 图片错误样式 */
.image-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.05);
  color: #999;
}

.image-error i {
  font-size: 32px;
  margin-bottom: 8px;
}

.detail-image-error {
  height: 300px;
}

.star-image {
  position: relative;
}

/* 美化明星卡片 */
.star-card {
  min-width: 150px;
  margin-right: 15px;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
}

.star-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  border-color: rgba(198, 47, 47, 0.3);
}

.star-info h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #c62f2f;
}

/* 美化详情区域 */
.star-detail-section {
  margin-bottom: 30px;
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.detail-image {
  position: relative;
  width: 100%;
  max-height: 300px;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 美化评分卡片 */
.value-card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  border-left: 4px solid #c62f2f;
}

.value-card:hover {
  transform: translateY(-5px);
}

.value-card h3 {
  color: #c62f2f;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-top: 0;
}

/* 图标样式（实际项目中应使用图标库） */
.icon-sun:before { content: "☀️"; }
.icon-moon:before { content: "🌙"; }
.icon-home:before { content: "🏠"; }
.icon-user:before { content: "👤"; }
.icon-like:before { content: "👍"; }
.icon-reply:before { content: "↩️"; }
.icon-image-broken:before { content: "🖼️"; }
</style>